<template>
  <div>
    <page-header-wrapper />
    <a-card style="margin-top: 10px" :loading="loading">
      <div style="margin-bottom: 10px">
        <a-select
          placeholder="请选择许可证书状态"
          style="width:220px; margin-right: 20px"
          @change="(value) => {
            handleChange(value, 'license_review_type')
          }"
        >
          <a-select-option v-for="(item, index) in merchantLicenseType" :key="index">
            {{ item }}
          </a-select-option>
        </a-select>
        <a-input-search placeholder="请输入商户名称" v-model="search.merchant_name" @search="merchantNameChange" style="width: 240px; margin-bottom: 10px" />
      </div>
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        :rowKey="record=>record.merchant_id"
        :pagination="pagination"
      >
        <template
          slot="license_file"
          slot-scope="text"
        >
          <div>
            <img :src="`${BASE_URL}/community/tool/get_file/${text}`" style="width: 60px" />
          </div>
        </template>
        <template
          slot="merchant_type"
          slot-scope="text"
        >
          <div>
            {{ merchantType[text - 1] }}
          </div>
        </template>
        <template
          slot="license_review_type"
          slot-scope="text"
        >
          <div>
            {{ merchantLicenseType[text] }}
          </div>
        </template>
        <template slot="operation" slot-scope="text, record">
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item v-for="(item, index) in merchantLicenseType" :key="index" @click="reviewMerchantLicenseInfo(record, index)">
                {{ item }}
              </a-menu-item>
            </a-menu>
            <a-button> 更改许可状态 <a-icon type="down" /> </a-button>
          </a-dropdown>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
import {
  merchantLicenseGet,
  reviewMerchantLicense
} from '@/api/merchant'

const columns = [
  {
    title: 'merchant_id',
    dataIndex: 'merchant_id',
    width: '6%',
    scopedSlots: { customRender: 'merchant_id' }
  },
  {
    title: 'merchant_name',
    dataIndex: 'merchant_name',
    width: '8%',
    scopedSlots: { customRender: 'merchant_name' }
  },
  {
    title: 'license_file',
    dataIndex: 'license_file',
    width: '8%',
    scopedSlots: { customRender: 'license_file' }
  },
  {
    title: 'legal_person',
    dataIndex: 'legal_person',
    width: '6%',
    scopedSlots: { customRender: 'legal_person' }
  },
  {
    title: 'license_number',
    dataIndex: 'license_number',
    width: '10%',
    scopedSlots: { customRender: 'license_number' }
  },
  {
    title: 'merchant_type',
    dataIndex: 'merchant_type',
    width: '6%',
    scopedSlots: { customRender: 'merchant_type' }
  },
  {
    title: 'license_review_type',
    dataIndex: 'license_review_type',
    width: '10%',
    scopedSlots: { customRender: 'license_review_type' }
  },
  {
    title: 'license_review_desc',
    dataIndex: 'license_review_desc',
    width: '10%',
    scopedSlots: { customRender: 'license_review_desc' }
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    width: '10%',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  name: 'MerchantLicense',
  components: {
    PageHeaderWrapper
  },
  data () {
    return {
      loading: true,
      columns,
      BASE_URL: process.env.VUE_APP_API_BASE_URL,
      data: [],
      pagination: {
        total: 0,
        onChange: (page) => {
          this.form.page = page
          this.merchantGetList()
        }
      },
      search: {
        page: 1,
        merchant_id: 0,
        merchant_license_id: '',
        license_type: -1,
        license_review_type: -1,
        merchant_name: ''
      },
      merchantLicenseType: ['待审核', '审核中', '审核成功', '审核失败'],
      merchantType: ['企业', '组织', '政府', '个人'],
      merchantList: []
    }
  },
  mounted () {
    this.merchantLicense()
  },
  methods: {
    merchantLicense () {
      merchantLicenseGet(this.search).then(res => {
        this.pagination.total = res.count || 0
        this.data = res.items
        this.loading = false
      })
    },
    reviewMerchantLicenseInfo (data, status) {
      const self = this
      if (status === 3) {
        this.$confirm({
          title: '请填写审核失败描述',
          content: h => <a-input placeholder='请填写审核失败描述' onInput={(e) => {
            data.license_review_desc = e.target.value
          }} />,
          onOk () {
            data.license_review_type = status
            self.requestReviewMerchantLicense(data)
          },
          onCancel () {
            self.$message.info('已取消操作')
          }
        })
      } else {
        data.license_review_type = status
        this.requestReviewMerchantLicense(data)
      }
    },
    requestReviewMerchantLicense (data) {
      reviewMerchantLicense(data).then(res => {
        this.$message.info(res.msg)
      })
    },
    handleChange (value, type) {
      this.search[type] = value
      this.searchLicense()
    },
    searchLicense () {
      this.search.page = 1
      this.merchantLicense()
    },
    merchantNameChange (value) {
      this.search.merchant_name = value
      this.searchLicense()
    }
  }
}
</script>

<style scoped>

</style>
